import { defineComponent, resolveComponent, PropType, isRef,unref,isReactive,toRaw } from 'vue'
import { Schemas, Event as Eventt, searchWrapperCol, searchLabelCol, wrapperCol, labelCol } from '@/components/form/data'

export default defineComponent({
  props: {
    schemas: {
      type: Array as PropType<Schemas[]>,
      default: () => [],
      required: true
    },
    layout: {
      type: String,
      default: ''
    }
  },
  setup (props, { emit, slots, attrs }) {
    const childComponent = (item: Schemas) => {
      if (item.component === 'custom') {
        return slotComponent(item.field)
      } else if (reComponent(item.component)) {
        const component = reComponent(item.component)
        const eventList: Eventt = {}
        const props: any = {}
        for (const key in item.event) {
          eventList[key] = (...arg) => {
            if(arg[0] instanceof Event)arg.shift()
              item.event[key](...arg)
          }
        }
        for (const el in item.childProps) {
          props[el] = unref(item.childProps[el])
        }
        props.allowClear = true
        console.log(attrs)
        return <component v-model={[attrs.model[item.field], 'value']} {...props} layout={props.layout} {...eventList} v-slots={item.slots} />
      } else {
        throw new Error('请检查component类型')
      }
    }
    const slotComponent = (component: string) => {
      return slots[component]?.()
    }
    const reComponent = (component: string) => {
      return resolveComponent(component)
    }
    const showStatus = (item) => {
      if (item.itemProps) {
        if ('show' in item.itemProps) {
          item.itemProps.showItem = isRef(item.itemProps.show) ? item.itemProps.show.value : item.itemProps.show
        } else {
          item.itemProps.showItem = true
        }
      } else {
        item.itemProps = { showItem: true }
      }
    }
    const renderCol = () => {
      if (props?.layout === 'inline') {
        let colProps = {
          sm: 12,
          md: 12,
          lg: 12,
          xl: 8,
          xxl: 6
        }
        return <a-form wrapperCol={searchWrapperCol} labelCol={searchLabelCol} {...attrs} ref='form'><a-row>
          {
            props.schemas.map((item) => {
              showStatus(item)
              if (item.field === 'Button') {
                colProps = {}
              }
              return (
                item?.itemProps?.showItem
                  ? <a-col {...colProps} {...item.colProps}><a-form-item {...item.itemProps} ref={item.field} label={item.label} name={item.field}>
                    {childComponent(item)}
                  </a-form-item></a-col>
                  : ''
              )
            })
          }
        </a-row>
        </a-form>
      } else {
        return <a-form wrapperCol={wrapperCol} labelCol={labelCol} {...attrs} ref='form'>{
          props.schemas.map((item) => {
            showStatus(item)
            return (
              item?.itemProps?.showItem
                ? <a-form-item {...item.itemProps} ref={item.field} label={item.label} name={item.field}>
                  {childComponent(item)}
                </a-form-item>
                : ''
            )
          })}
        </a-form>
      }
    }
    return () => {
      return (
        renderCol()
      )
    }
  }
})
